<template>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="96.5px" @submit.prevent>
        <el-form-item label="运费模板" prop="transportId" class="zw_mb_0">
            <el-select
                v-model="formData.transportId"
                placeholder="请选择运费模版"
                style="width: 600px"
                filterable
                @visible-change="onFreightSelectVisibleChange">
                <el-option v-for="item in freightList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-link type="primary" :underline="false" style="margin-left: 12px" @click="topFreightTem">
                新增模板
            </el-link>
        </el-form-item>
    </el-form>
</template>

<script setup>
import storage from '@/commons/storage';
import request from '@/request';
import { reactive, ref } from 'vue';

const props = defineProps({
    hasActivityMsg: { type: String },
    isActivity: { type: Boolean, default: false },
    isErp: { type: Boolean, default: false }
});
const formRef = ref(null);
const formData = reactive({
    transportId: ''
});
const rules = {
    transportId: { required: true, message: '请选择运费模版', trigger: 'change' }
};
const freightList = ref([]);
// 获取运费模板列表
const getfreightList = async () => {
    const { data } = await request('getfreightList', {
        shopId: storage.get('ZW-SHOPID'),
        enable: 1,
        page: 1,
        perPage: 100000
    });
    const list = Array.isArray(data.list) ? data.list : [];
    freightList.value = list;
};
getfreightList();
const onFreightSelectVisibleChange = async visible => {
    if (visible) getfreightList();
};
const topFreightTem = () => {
    const url = `${window.location.origin}/order/delivery`;
    window.open(url);
};
const validate = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate(res => {
            if (res) {
                resolve();
            } else {
                reject();
            }
        });
    });
};
const echoHandle = query => {
    Object.keys(formData).forEach(key => (formData[key] = query[key]));
};
defineExpose({
    echoHandle,
    validate,
    formData
});
</script>

<style lang="scss" scoped>
.mb_0 {
    margin-bottom: 0;
}
</style>
